<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>calc</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        header {
            width: calc(100% / 2);
            height: 100px;
            margin: calc(10px * 5) auto;
            background-color: #ff9000;
        }
    </style>
</head>
<body>
    <!-- calc 是CSS提供的一个动态计算长度值的函数，任何在CSS中表示长度值的内容都可以使用这个函数。（长度：px/百分比)
        calc 表达式可以使用 + - * /，符号两侧要有一个空格，遵循数学计算优先级（先乘除后加减）

        %/px  +/-  %/px
        %/px */ 数字
    -->

    <header></header>

    <script type="text/javascript">

        // 监听改变页面尺寸变化的事件为：window.onresize
        /* window.onload = resizeHeader;
        window.onresize = resizeHeader;
        
        function resizeHeader(){
            var headerEle = document.querySelector("header");
            headerEle.style.width = document.documentElement.clientWidth - 200 + "px";
        } */
    </script>
</body>
</html>